<template>
  <div>
    <div class="dataList">
      <div>
        <el-icon size="16">
          <List />
        </el-icon>
        数据列表
      </div>
    </div>
    <el-table :data="SelectSessionList" border style="width: 100%">
      <el-table-column prop="id" label="编号" />
      <el-table-column prop="name" label="秒杀时间段名称" />
      <el-table-column label="每日开始时间">
        <template #default="{ row }">
          {{ formateDate(row.startTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="每日结束时间">
        <template #default="{ row }">
          {{ formateDate(row.endTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="productCount" label="商品数量" />
      <el-table-column prop="address" label="操作">
        <template #default="{ row }">
          <el-button text type="primary" @click="toSessionGoodsList(row.id)"
            >商品列表</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { getFlashSessionSelectListApi } from "./api/index";
import { useRoute, useRouter } from "vue-router";
import { List } from "@element-plus/icons-vue";
import { formateDate } from "@/utils";
const router = useRouter();
const route = useRoute();
// 列表
const SelectSessionList = ref<ISelectSessionList[]>();
// 在path拿到id
const flashPromotionId = ref<string>();
flashPromotionId.value = route.query.flashPromotionId as string;
// 页面初始渲染
const getSelectSessionList = () => {
  getFlashSessionSelectListApi(parseInt(flashPromotionId.value as string)).then(
    (res) => {
      if (res.code === 200) {
        SelectSessionList.value = res.data;
      }
    }
  );
};
getSelectSessionList();

// 跳转秒杀商品列表
const toSessionGoodsList = (flashPromotionSessionId: number) => {
  router.push({
    path: "/sms/flashProductRelation",
    query: {
      flashPromotionId: flashPromotionId.value,
      flashPromotionSessionId: flashPromotionSessionId,
    },
  });
};
</script>

<style scoped lang="less">
.dataList {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  align-items: center;
  margin-bottom: 20px;
}

:deep(.cell) {
  text-align: center;
}
</style>
